<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/css/wp.css" media="all">

    <style>

        .input-block{
            margin-right: 30px;
        }

        .unit{
            position: absolute;
            right: 0px;
            top: 0px;
            right: -160px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">
        <h2 class="wp-module-title">充值</h2>
        <div class="wp-module-box">
            <form id="myform" class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item input-block">
                    <label class="layui-form-label">充值地址</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="toWalletAddress" maxlength="64" lay-verify="emptyCheck" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">货币类型</label>
                    <div class="layui-input-block input-block">
                        <select v-model="currencyType" lay-filter="currencyType">
                            <option value="2000">USDT</option>
                            <option value="1000">现金</option>
                        </select>
                        <div class="unit" style="color: #595959;">（用户给付的货币类型）</div>
                    </div>
                </div>

                <div v-if="isSelectUSDT" class="layui-form-item">
                    <label class="layui-form-label">货币金额</label>
                    <div class="layui-input-block input-block">
                        <input type="text" v-model="usdtNumber" @blur="exchange" maxlength="10" oninput="this.value=this.value.replace(/\D/g,'');" lay-verify="emptyCheck" autocomplete="off" class="layui-input">
                        <div class="unit" style="right: -55px;">USDT</div>
                    </div>
                </div>

                <div v-if="isSelectUSDT" class="layui-form-item">
                    <label class="layui-form-label">融资轮次</label>
                    <div class="layui-input-block input-block">
                        <select v-model="lc" lay-filter="lc" lay-verify="emptyCheck">
                            <option value="1000" selected="">天使轮</option>
                            <option value="2000">基石轮</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">兑换金额</label>
                    <div class="layui-input-block input-block">
                        <input type="text" v-model="money" maxlength="10" oninput="this.value=this.value.replace(/\D/g,'');" lay-verify="emptyCheck" autocomplete="off" class="layui-input">
                        <div class="unit" style="right: -55px;">SHQC</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin: auto;text-align: center;">
                        <button type="submit" style="width: 120px;" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-submit-btn">提交</button>
                        <button type="button" style="width: 120px;" class="layui-btn layui-btn-normal" lay-filter="data-reset-btn" @click="reset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                isSelectUSDT: true,
                toWalletAddress:'',
                moneyTypeId:'2000', // 充值均为SHQC
                currencyType: '2000',
                usdtNumber:'',
                lc:'1000',
                money:''
            },
            mounted:function(){
                form.render();
                this.selectCurrencyTypeEvent();
                this.selectLcEvent();
                this.submitEvent();
            },
            methods: {
                selectCurrencyTypeEvent:function(val){
                    var that = this;
                    form.on('select(currencyType)', function(data){
                        if(data.value == '2000'){
                            that.isSelectUSDT = true;
                            that.currencyType = "2000";
                        }else{
                            that.isSelectUSDT = false;
                            that.currencyType = "1000";
                        }
                    });
                },
                selectLcEvent:function(val){
                    var that = this;
                    form.on('select(lc)', function(data){
                        that.lc = data.value;
                        that.exchange();
                    });
                },
                exchange:function(){
                    var that = this;
                    if(!that.usdtNumber){
                        return;
                    }

                    wp.httpPost({
                        url:wp.url('/wp/ewallet/wallet/exchangeMoney/calculateUsdtToShqc'),
                        data:{
                            exchangeAmount:that.usdtNumber,
                            converType: that.lc
                        },
                        success:function(data){
                            that.money = data.dataBody;
                        }
                    });
                },
                submitEvent:function(){
                    var that = this;

                    var reg = /^(\-)?\d+(\.\d+)?$/;
                    // 需要的时候自定义验证规则
                    form.verify({
                        check: function(value){
                            if(!value){
                                return '不能为空';
                            }

                            if(!reg.test(value)){
                                return '参数格式不正确';
                            }
                        },
                        emptyCheck:function(value){
                            if(!value){
                                return '不能为空';
                            }
                        }
                    });

                    // 监听提交操作
                    form.on('submit(data-submit-btn)', function (data) {
                        var result = JSON.stringify(data.field);
                        console.log((that));
                        layer.confirm("确认同意充值操作?", {title:"提示信息",icon:0}, function(index) {
                            layer.close(index);
                            var loading = wp.loading();
                            wp.httpPost({
                                url: wp.url('/wp/ewallet/wallet/accountInfo/rechargeMoney'),
                                data: {
                                    toWalletAddress: that.toWalletAddress,
                                    money: that.money,
                                    moneyTypeId: that.moneyTypeId,
                                    currencyType: that.currencyType
                                },
                                success: function () {
                                    wp.closeLoading(loading);
                                    layer.msg('充值成功');

                                    // 清空
                                    that.toWalletAddress = '';
                                    that.money = '';
                                    that.usdtNumber = '';
                                },
                                failure: function (data) {
                                    if (data.code == '100006') {
                                        layer.msg('根据钱包地址未找到对应账户');
                                    }
                                }
                            });
                        });
                        return false;
                    });
                },
                reset:function(){
                    $("#myform").get(0).reset();
                    this.isSelectUSDT = true;
                    this.currencyType = "2000";
                    this.toWalletAddress = "";
                    this.usdtNumber = "";
                    this.money = "";
                }
            }
        });
    });
</script>

</body>
</html>